<!--
 * @Author: zjj
 * @Date: 2019-11-19 11:48:38
 * @LastEditors: zjj
 * @LastEditTime: 2020-02-24 10:32:20
 -->
<!--  -->
<template>
  <div class="detail">
    <Nav class="fixed-nav" title="活动详情" id="nav">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <!-- 顶部tab -->
    <div class="top-tab flex" id="topTab">
      <template v-for="(item,index) in c_topTabs">
        <div
          class="top-item"
          :class="index==topTabIndex?'top-item-selected':''"
          :key="index"
          @click="topTabChange(index)"
        >{{item}}</div>
      </template>
      <div
        class="top-bottom-line flex justify-center"
        :style="[{transform:'translateX('+topTabIndex*100+'%)'},{width:100/c_topTabs.length+'%'}]"
        v-if="c_topTabs.length"
      >
        <div class="content-line"></div>
      </div>
    </div>
    <!-- 选购商品 -->
    <section class="section-wrapper" v-if="topTabIndex==0">
      <!-- 购买即赠 -->
      <!-- 购买即赠 -->
      <router-link
        v-if="activityDetail.city_data"
        tag="span"
        :to="{name:'coupon',params:{id:$route.params.id}}"
        class="buy-send flex justify-center aligin-center f-12 color-white"
      >购买即赠</router-link>
      <div class="body" ref="bodyScroll" id="bodyScroll">
        <span
          @click="showRule"
          class="rule-tag flex justify-center aligin-center f-12 color-white"
        >活动规则</span>
        <section>
          <img class="product-img" :src="activityDetail.image" alt v-if="activityDetail.image" />
          <div class="product-img" v-else></div>
          <!-- 收藏 -->

          <div class="pd-16">
            <div
              :class="[activityDetail.favorite?'collect-img-selected':'collect-img']"
              @click="collectProduct"
            ></div>
            <!-- 参与详情 -->
            <div
              class="flex justify-between aligin-center mt-18"
              v-if="activityDetail.open_status!=2&&activityDetail.join.count"
            >
              <div
                class="attend-msg"
                v-if="activityDetail.open_status==0"
              >本期已有 {{activityDetail.join.count}} 人参加</div>
              <div class="attend-msg" v-else-if="activityDetail.open_status==1">本期人数已满</div>
              <router-link
                tag="div"
                class="flex aligin-center"
                :to="{name:'joindetail',params:{key:activityDetail.key}}"
              >
                <div class="icons">
                  <template v-for="(item,index) in activityDetail.join.user_headimg">
                    <img :key="index" :src="item" alt />
                  </template>
                </div>
                <span class="f-12 color-gray ml-10">查看</span>
                <span class="arrow-right ml-6"></span>
              </router-link>
            </div>
            <div class="flex aligin-center mt-12">
              <div class="product-name ellipsis-line2">
                {{activityDetail.name}}
                <span class="f-12 color-gray">第{{activityDetail.issue_id}}期</span>
              </div>
              <div
                class="copy-url flex justify-center aligin-center f-12 color-red"
                @click="copyUrl"
              >分享</div>
            </div>
            <!-- 进度条 -->
            <div class="progress-wrapper mt-16">
              <div class="progress" :style="{width:activityDetail.progress+'%'}"></div>
              <span
                class="progress-number"
                v-if="activityDetail.open_status!=0"
              >{{activityDetail.power}}</span>
            </div>
            <!-- 能量未集满 -->
            <div
              class="flex justify-between aligin-center f-14 mt-6"
              v-if="activityDetail.open_status==0"
            >
              <div class="f-12 color-gray">已送出{{activityDetail.current}}个号码</div>
              <div class="f-12 color-gray">还差{{activityDetail.surplus}}个结束</div>
            </div>
            <!-- 待开奖 活动区 -->
            <div
              class="flex justify-center f-14 color-red mt-6"
              v-if="activityDetail.open_status==1&&activityDetail.type==1"
            >本期号码已于{{activityDetail.end_time}}派完,请关注本期官方结果</div>
            <!-- 待开奖 购物区 -->
            <div
              class="flex justify-center f-14 color-red mt-6"
              v-if="activityDetail.open_status==1&&activityDetail.type==0"
            >幸运号码将于{{activityDetail.open_time}}左右发布,发布后开始下一期</div>
            <div
              class="flex justify-center f-14 color-red mt-6"
              v-if="activityDetail.open_status==1&&activityDetail.type==2"
            >一分钟后开奖，活动结果查看活动记录</div>
            <!-- 已开奖 活动区-->
            <template v-if="activityDetail.open_status==2&&activity_type==0">
              <div
                class="mt-16 ml-12 mr-12 color-red f-12 line-height-19"
              >本期幸运之星:{{activityDetail.lucky.nick_name}}</div>
              <div
                class="mt-16 ml-12 mr-12 color-red f-12 line-height-19"
              >本期幸运数字:{{activityDetail.lucky.luck_number}}</div>
              <div
                class="mt-16 ml-12 mr-12 color-red f-12 line-height-19"
              >揭晓时间:{{activityDetail.lucky.open_time}}</div>
            </template>
            <!-- 已开奖 购物区-->
            <div
              class="flex justify-center"
              v-if="activityDetail.open_status==2&&activity_type==1"
            >活动已结束,查询活动结果请点击活动纪录</div>
            <!-- 中奖规则 能量已集满 活动区  -->
            <div
              class="rule-cal flex aligin-center"
              v-if="activityDetail.type==1&&activityDetail.open_status==1"
            >
              <span>幸运号码 = (</span>
              <div>
                <div>{{activityDetail.open_status==2?activityDetail.lucky.winningNumber:'体彩排列5第'+activityDetail.period_id+'期开奖号码'}}</div>
                <div class="line"></div>
                <div>{{activityDetail.power}}</div>
              </div>
              <span class="rest">)的余数+100001</span>
            </div>
            <div
              class="rule-cal flex aligin-center"
              v-if="activityDetail.type==0&&activityDetail.open_status==1"
            >
              <span>幸运号码 = (</span>
              <div>
                <div>{{activityDetail.open_status==2?activityDetail.lucky.winningNumber:'时时彩'+activityDetail.period_id+'期开奖号码'}}</div>
                <div class="line"></div>
                <div>{{activityDetail.power}}</div>
              </div>
              <span class="rest">)的余数+100001</span>
            </div>
            <div
              class="rule-cal flex aligin-center"
              v-if="activityDetail.type==2&&activityDetail.open_status==1"
            >
              <span>幸运号码 = (</span>
              <div>
                <div>{{activityDetail.open_status==2?activityDetail.lucky.winningNumber:"购买时间排列取值之和"}}</div>
                <div class="line"></div>
                <div>{{activityDetail.power}}</div>
              </div>
              <span class="rest">)的余数+100001</span>
            </div>
            <!-- 推广奖励 -->
            <router-link
              tag="div"
              :to="{name:'recommand',params:{id:$route.params.id}}"
              class="share-reward mt-8"
              v-if="activityDetail.pid_reward"
            >
              转发好友即有机会获得{{activityDetail.pid_reward.name}},
              <span class="color-gray">点击了解>></span>
            </router-link>
          </div>
        </section>
        <div id="search"></div>
        <div
          class="search-wrapper flex aligin-center"
          id="searchSticky"
          :class="searchSticky?'search-sticky':''"
        >
          <router-link
            tag="div"
            :to="{name:'search',params:{id:$route.params.id}}"
            class="search flex aligin-center"
          >
            <span class="search-icon mr-8 ml-12"></span>
            <input class="input" type="text" disabled placeholder="输入你想购买的商品名称" />
          </router-link>
        </div>
        <!-- 能量值满了并且是活动区 -->
        <section v-if="activityDetail.open_status!=0&&activity_type==0">
          <div class="bg-gray" :class="searchSticky?'add-45':''">
            <div class="attend-title">参与名单</div>
          </div>
          <Attend :attendList.sync="attendList"></Attend>
        </section>
        <!-- 能量值未集满 -->
        <section
          class="relative"
          :class="searchSticky?'add-45':''"
          v-if="activityDetail.goods&&activityDetail.goods.length&&(activityDetail.open_status==0||activity_type==1)"
        >
          <!-- 能量已集满 并且是购物区  -->
          <div
            class="forbid-mask flex justify-center aligin-center"
            v-if="activityDetail.open_status!=0&&activity_type==1"
          >
            <div class="forbid">
              <div
                class="forbid-tip flex aligin-center justify-center f-12 color-white"
              >正在开奖中,先看看其他活动吧！</div>
            </div>
          </div>
          <div class="pd-15" id="flag">
            <div
              class="title-border f-16 f-bold flex justify-between"
              v-if="$store.state.isLogin&&activityDetail.is_norequiremoney"
            >
              <span>请选择购买商品</span>
              <template v-if="$store.state.isLogin&&activityDetail.is_norequiremoney">
                <div class="f-14 flex aligin-center">
                  <span class="ml-auto">剩余参与次数{{activityDetail.lottery_num}}</span>
                  <span class="add-btn" @click="addNumber">增加</span>
                </div>
              </template>
            </div>
            <div class="flex flex-column">
              <template v-for="(item,index) in activityDetail.goods">
                <div class="product-item flex" @click="tapProductItem(item)" :key="index">
                  <img :src="item.picture" alt />
                  <div class="ml-10 flex-1 flex justify-between attend-body">
                    <div class="mt-4 ellipsis-line2 product-name1">{{item.goods_name}}</div>
                    <div>
                      <span class="f-12 send-code color-gray mt-10">库存: {{item.stock}}</span>
                      <span
                        class="f-12 color-pink mt-10"
                        v-if="parseInt(item.new_sub_price)"
                      >新人立减{{item.new_sub_price}}元</span>
                    </div>
                    <div class="flex mt-16 justify-between aligin-center f-12">
                      <div class="price f-18 color-red">
                        <span class="f-medium">￥{{item.price}}</span>
                        <span
                          class="discount-price color-gray"
                          v-if="parseInt(item.offer_price)"
                        >￥{{item.offer_price}}</span>
                      </div>
                      <div
                        class="flex aligin-center justify-center color-white buy f-bold"
                        @click.stop="showProductParams(item)"
                      >立即购买</div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </section>
        <!-- 显示商品分组 -->
        <section
          id="wrapper"
          class="wrapper"
          :class="searchSticky?'add-45':''"
          v-if="activityDetail.add_type==0&&(activityDetail.open_status==0||activity_type==1)"
        >
          <!-- 能量已集满 并且是购物区  -->
          <div
            class="forbid-mask flex justify-center aligin-center"
            v-if="activityDetail.open_status!=0&&activity_type==1"
          >
            <div class="forbid">
              <div
                class="forbid-tip flex aligin-center justify-center f-12 color-white"
              >正在开奖中,先看看其他活动吧！</div>
            </div>
          </div>
          <div
            class="tip flex justify-between"
            id="tipCategroies"
            v-if="$store.state.isLogin&&activityDetail.is_norequiremoney"
          >
            <template v-if="$store.state.isLogin&&activityDetail.is_norequiremoney">
              <div class="f-14">
                <span class="ml-auto">剩余参与次数{{activityDetail.lottery_num}}</span>
                <span class="add-btn" @click="addNumber">增加</span>
              </div>
            </template>
          </div>
          <div id="tab"></div>
          <div class="tab-wrap" :class="isSticky?'sticky':''">
            <Scroll :scrollX="true">
              <TabCommonReward
                :isScroll="true"
                :tabs.sync="tabs"
                :tabIndex.sync="tabIndex"
                @tabChange="tabChange"
              ></TabCommonReward>
            </Scroll>
          </div>
          <!-- scroll -->
          <div class="height-full" :class="isSticky?' pt-44':''">
            <div class>
              <product-list
                :productList.sync="productList"
                @tapProductItem="tapProductItem"
                @showProductParams="showProductParams"
              ></product-list>
              <div class="loading-bottom f-14" v-if="loading">加载中...</div>
              <div class="loading-bottom f-14" v-if="noMore">没有更多了</div>
            </div>
          </div>
        </section>
      </div>
    </section>
    <section class="section-wrapper" v-if="topTabIndex==1">
      <Lottery
        v-if="activity_type==0"
        ref="lottery"
        :activityId.sync="c_activityId"
        :shopId.sync="activityDetail.shop_id"
      ></Lottery>
      <Overdue v-else ref="overdue" :activityId.sync="c_activityId"></Overdue>
    </section>
    <section class="section-wrapper" v-if="topTabIndex==2">
      <!-- 能量值未集满 -->
      <Lucky v-if="activityDetail.open_status==0&&activity_type==0" :codes.sync="luckyInfo.numbers">
        <div class="lucky-text">
          <div>还未结束</div>
          <div>正在收集能量中......</div>
        </div>
      </Lucky>
      <!-- 能量值已集满 -->
      <Lucky
        v-else-if="activityDetail.open_status!=0&&activity_type==0"
        :codes.sync="luckyInfo.numbers"
      >
        <template v-if="luckyInfo.open_status!=2">
          <div class="money"></div>
          <div class="tip-content">
            正在等待
            <span class="color-blue">体彩排列5第{{luckyInfo.period.period}}期开奖</span>
            <div>活动结果将会根据以下公式自动生成</div>
          </div>
          <div class="rule-action flex aligin-center">
            <span class="mr-6">(</span>
            <div>
              <div>体彩排列5第{{luckyInfo.period.period}}期开奖号码</div>
              <div class="line"></div>
              <div>{{activityDetail.power}}</div>
            </div>
            <span class="rest">)的余数+100001</span>
          </div>
        </template>
        <template v-else>
          <div class="lucky-num flex">
            <span class="content-title">{{luckyInfo.period.luck_number}}</span>
            <span class="lucky-tip">幸运号码</span>
          </div>
          <div class="money-large"></div>
          <div class="reward-info">
            <div>活动结果：{{luckyInfo.lucky.self?'恭喜你成为本期幸运之星':'您与大奖擦肩而过'}}</div>
            <div>获奖者:{{luckyInfo.lucky.nick_name}}</div>
            <div>揭晓时间:{{luckyInfo.lucky.open_time}}</div>
          </div>
          <div class="result">
            <div>体彩排列5第{{luckyInfo.period.period}}期开奖结果：{{luckyInfo.period.winningNumber}}</div>
            <div class="rule-action flex aligin-center rule-margin">
              <span class="mr-14">(</span>
              <div>
                <div>{{luckyInfo.period.winningNumber}}</div>
                <div class="line1"></div>
                <div>{{activityDetail.power}}</div>
              </div>
              <span class="rest">)的余数+100001={{luckyInfo.period.luck_number}}</span>
            </div>
          </div>
          <div></div>
        </template>
      </Lucky>
      <ShareOrder v-else ref="shareOrder" :activityId.sync="c_activityId"></ShareOrder>
    </section>
    <!-- 中奖规则 -->
    <Rule
      ref="rule"
      :flag.sync="ruleFlag"
      @closeDialog="ruleFlag=false"
      :activityId.sync="c_activityId"
      :shopId.sync="activityDetail.shop_id"
    ></Rule>
    <router-link
      tag="div"
      class="back-home flex aligin-center"
      :to="{path:'/index/home'}"
      v-if="$route.query.pid"
    >
      <span class="ml-4 mr-4">&lt;</span>
      <span>返回</span>
    </router-link>
    <div class="info" v-if="showMask">
      <div class="J-weixin-tip weixin-tip">
        <div class="weixin-tip-content">请在菜单中选择分享</div>
      </div>
      <div class="btn flex justify-center aligin-center" @click="showMask=false">我知道了</div>
    </div>
    <ShareDialog
      :info="activityDetail.reward"
      :shareFlag.sync="shareFlag"
      @closeAds="shareFlag=false"
      @shareActivity="shareActivity"
    ></ShareDialog>
    <router-view></router-view>
    <!-- 选择产品参数 -->
    <ProductParams
      ref="productParams"
      type="shoppingCar"
      :flag.sync="productParamflag"
      v-bind="productDataItem"
      :productOption.sync="productOption"
      :initPic.sync="initPic"
      :c_selectOption.sync="c_selectOption"
      :sku.sync="sku"
      @submit="submit"
      @closeDialog="productParamflag=false"
      @optionSelected="optionSelected"
      @addShoppingCar="addShoppingCar"
    ></ProductParams>
  </div>
</template>

<script>
import ShareDialog from '../../components/countLint_'
import Nav from '../../components/Nav'
import Scroll from '../../components/Scroll'
import ShareOrder from '../../components/ShareOrder'
import Overdue from '../../components/Overdue'
import Lottery from '../../components/lottery'
import RewordRule from '../../components/RewordRule'
import Attend from '../../components/Attend'
import TabCommon from '../../components/TabDivide'
import TabCommonReward from '../../components/TabCommon'
import Coupon from '../../components/Coupon'
import ProductList from '../../components/productList'
import Page from '../../mixin/page'
import Lucky from '../../components/lucky'
import ShowCoupon from '../../components/showCoupon'
import Rule from '../../components/Rule'
import ProductParams from '../../components/ProductParams'
import {
  activityDetail,
  activityProduct,
  activityHistories,
  userFavorite,
  lucky,
  productSku,
  joinList,
  cart_update,
  orderCreate,
  weLogin,
  cart_store
} from '../../api/api'
export default {
  mixins: [Page],
  components: {
    Nav,
    ShareOrder,
    Lottery,
    Attend,
    TabCommon,
    TabCommonReward,
    Coupon,
    ProductList,
    Scroll,
    Lucky,
    ShowCoupon,
    Rule,
    Overdue,
    ShareDialog,
    ProductParams
  },
  data() {
    return {
      productDataItem: {},
      productParamflag: false,
      productOption: [],
      initPic: '',
      c_selectOption: [],
      selectItem: {},
      sku: [], //匹配规则？
      searchSticky: false, //搜索吸顶
      topTabIndex: 0, //顶部TAB栏切换
      shareFlag: false,
      overdueFlag: false, //往期记录
      couponFlag: false, //优惠券详情弹窗flag
      luckyFlag: false, //中奖记录
      luckyInfo: { period: {}, lucky: {} }, //中奖信息
      couponInfo: {}, //优惠券信息
      flag: false,
      isSticky: false, //吸顶
      activity_type: 0, //0（活动区） 1（购物区）
      activityDetail: { join: {}, content: {}, pid_reward: {} }, //活动详情
      attendList: [], //产品列表
      categories: [], //商品分类list
      tabs: [],
      couponTabs: [],
      couponTabsIndex: 0,
      couponList: [], //优惠券列表
      productList: [], //产品列表
      tabIndex: 0,
      showMask: false, //显示指引
      ruleFlag: false //中奖规则
    }
  },
  computed: {
    c_topTabs() {
      if (this.activity_type == 0) {
        return ['选购商品', '活动详情', '幸运之星']
      } else {
        return ['选购商品', '活动记录', '活动晒单']
      }
    },
    getTabTop() {
      return document.getElementById('tab').offsetTop
    },
    // 活动ID
    c_activityId() {
      return parseInt(this.$route.params.id)
    },
    // 优惠券列表
    c_couponList() {
      if (this.couponList.length) {
        return this.couponList[this.tabIndex].child
      }
      return []
    }
  },
  watch: {
    $route() {}
  },
  methods: {
    showProductParams(item) {
      this.productDataItem = item
      this.$set(this.productDataItem, 'givePower', item.give_power)
      delete this.productDataItem.give_power
      this.$set(this.productDataItem, 'progress', this.activityDetail.progress)
      this.$set(this.productDataItem, 'current', this.activityDetail.current)
      this.$set(this.productDataItem, 'power', this.activityDetail.power)
      this.$set(
        this.productDataItem,
        'is_norequiremoney',
        this.activityDetail.is_norequiremoney
      )
      this.$set(this.productDataItem, 'm_id', item.m_id)
      this.$set(this.productDataItem, 'limit', -1)
      this.initPic = item.picture
      productSku({ id: item.goods_id }).then(res => {
        this.productOption = res.data.result.spec
        this.sku = res.data.result.sku
        let data = res.data.result.spec.map(item => {
          return item.value[0]
        })
        this.c_selectOption = data
        this.productParamflag = true
      })
    },
    addShoppingCar(productNumber, item) {
      cart_store({
        activity_id: this.$route.params.id,
        goods_id: this.productDataItem.goods_id,
        sku_id: item.sku_id,
        num: productNumber
      }).then(({ data: { result } }) => {
        this.$toast(result)
        this.productParamflag = false
      })
    },
    submit(productNumber, item) {
      this.productParamflag = false
      orderCreate({
        subject: this.activityDetail.key,
        product_id: item.goods_id,
        activity_id: this.$route.params.id,
        sku_id: item.sku_id,
        numbers: productNumber,
        device_code: 1
      })
        .then(res => {
          this.$router.push({
            name: 'orderDetail',
            params: { id: res.data.result.order_no }
          })
        })
        .catch(res => {
          if (res == '请先使用微信进行授权，享用更好的服务') {
            this.$dialog
              .confirm({
                message: '请先使用微信进行授权，享用更好的服务'
              })
              .then(() => {
                return weLogin({ from: 'authorization' })
              })
              .then(res => {
                window.location.href = res.data.result
              })
          }
        })
    },
    //选择规格
    optionSelected(item) {
      //设置单选
      let index = this.c_selectOption.findIndex(_item => {
        return _item.spec_id == item.spec_id
      })
      if (index != -1) {
        this.c_selectOption.splice(index, 1, item)
      }
    },
    topTabChange(index) {
      if (this.topTabIndex != index) {
        this.topTabIndex = index
      }
    },
    tabChange(index) {
      if (this.tabIndex != index) {
        this.tabIndex = index
        //重置
        this.current_page = 0
        this.last_page = 1
        this.loading = false
        this.productList = []
        // this.$nextTick(() => {
        this._productApi()
        if (this.isSticky) {
          let tip = 0
          if (document.getElementById('tipCategroies')) {
            tip = document.getElementById('tipCategroies').offsetHeight || 0
          }

          let body = document.getElementById('bodyScroll')
          let topTab = document.getElementById('topTab').offsetHeight
          let nav = document.getElementById('nav').offsetHeight
          body.scrollTop =
            document.getElementById('wrapper').offsetTop - topTab - nav + tip
        }
        // });
      }
    },
    getNavHeight() {
      let nav = document.getElementById('nav')
      let topTab = document.getElementById('topTab')
      return nav.offsetHeight + topTab.offsetHeight
    },
    addNumber() {
      this.shareFlag = true
    },
    // 滚动监听
    windowScroll() {
      let body = document.getElementById('bodyScroll')
      body.onscroll = () => {
        var scrollTop = body.scrollTop

        //搜索吸顶
        document.getElementById('search').getBoundingClientRect().top -
          this.getNavHeight() <
        0
          ? (this.searchSticky = true)
          : (this.searchSticky = false)
        //如果是分组
        if (
          this.activityDetail.add_type == 0 &&
          (this.activityDetail.open_status == 0 || this.activity_type == 1)
        ) {
          if (this.activityDetail.open_status == 0) {
            let search = document.getElementById('searchSticky').offsetHeight
            document.getElementById('tab').getBoundingClientRect().top -
              this.getNavHeight() -
              search <
            0
              ? (this.isSticky = true)
              : (this.isSticky = false)
          }
        }

        //变量windowHeight是可视区的高度
        var windowHeight = body.clientHeight
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = body.scrollHeight

        //滚动条到底部的条件
        var ua = navigator.userAgent.toLowerCase()
        var isWeixin = ua.indexOf('micromessenger') != -1
        if (isWeixin) {
          if (scrollTop + windowHeight + 10 >= scrollHeight && scrollTop != 0) {
            if (this.noMore) {
              return
            }
            this.loading = true
            //如果是分组
            if (
              this.activityDetail.add_type == 0 &&
              (this.activityDetail.open_status == 0 || this.activity_type == 1)
            ) {
              this._productApi()
            }
            //如果是活动区并且能量值已集满
            else if (
              this.activityDetail.open_status != 0 &&
              this.activity_type == 0
            ) {
              this._joinListApi()
            }
          }
        } else {
          if (scrollTop + windowHeight + 56 >= scrollHeight && scrollTop != 0) {
            if (this.noMore) {
              return
            }
            this.loading = true
            //如果是分组
            if (
              this.activityDetail.add_type == 0 &&
              (this.activityDetail.open_status == 0 || this.activity_type == 1)
            ) {
              if (this.activityDetail.open_status == 0) {
                this._productApi()
              }
            }
            //如果是活动区并且能量值已集满
            else if (
              this.activityDetail.open_status != 0 &&
              this.activity_type == 0
            ) {
              this._joinListApi()
            }
          }
        }
      }
    },
    //请求幸运之星/往期记录
    showLucky_record() {
      // 如果是活动详情
      if (this.activity_type == 0) {
        lucky({ key: this.activityDetail.key }).then(({ data: { result } }) => {
          this.luckyInfo = result
          this.luckyFlag = true
        })
      } else {
        this.overdueFlag = true
        this.$refs.overdue.request()
      }
    },
    //请求商品分类
    _productApi() {
      if (this.isRequest) {
        return
      }
      this.isRequest = true
      activityProduct({
        page: this.current_page + 1,
        id: this.$route.params.id,
        category_id: this.categories[this.tabIndex].category_id
      }).then(
        res => {
          if (res.data.result && res.data.result.length != 0) {
            this.productList = [...this.productList, ...res.data.result]
            this.current_page += 1
            this.last_page = this.current_page + 1
          } else {
            this.last_page = this.current_page
          }
          this.loading = false
          this.isRequest = false
        },
        res => {
          this.isRequest = false
        }
      )
    },
    //显示优惠券弹窗详情
    showCoupon(item) {
      this.couponInfo = item
      this.couponFlag = true
    },
    //切换优惠券
    tabChangeCoupon(index) {
      if (this.couponTabsIndex != index) {
        this.couponTabsIndex = index
      }
    },
    //显示推广规则
    showRule() {
      this.ruleFlag = true
      this.$refs.rule.request()
    },
    // 分享
    shareActivity() {
      var ua = navigator.userAgent.toLowerCase()
      var isWeixin = ua.indexOf('micromessenger') != -1
      if (isWeixin) {
        this.showMask = true
      } else {
        this.$copyText(
          window.location.origin +
            window.location.pathname +
            '?pid=' +
            this.activityDetail.uid
        ).then(
          e => {
            this.$toast('复制成功！')
          },
          e => {
            this.$notify(e)
          }
        )
      }
    },
    // 商品点击
    tapProductItem(item) {
      if (!this.$store.state.isLogin && this.$route.query.pid) {
        this.$router.push({
          name: 'login',
          query: { pid: this.$route.query.pid }
        })
        return
      }
      if (!this.$store.state.isLogin) {
        this.$router.push({
          name: 'login'
        })
        return
      }
      if (
        !this.activityDetail.lottery_num &&
        this.activityDetail.is_norequiremoney
      ) {
        this.addNumber()
        return
      }

      this.$router.push({
        name: 'productDetail',
        params: {
          productId: item.goods_id,
          key: this.activityDetail.key
        }
      })
    },
    // 中奖晒单/活動詳情
    shareOrder() {
      this.flag = true
      //如果是活动区
      if (this.activity_type == 0) {
        this.$refs.lottery.request()
      }
      //如果是购物区
      else {
        this.$refs.shareOrder.request()
      }
    },
    init() {
      var ua = navigator.userAgent.toLowerCase()
      var isWeixin = ua.indexOf('micromessenger') != -1
      let params = { id: this.$route.params.id, device_code: isWeixin ? 1 : 2 }
      activityDetail(params).then(res => {
        this.activityDetail = res.data.result
        this.activity_type = res.data.result.activity_type
        //幸运之星
        if (this.activity_type == 0) {
          lucky({ key: this.activityDetail.key }).then(
            ({ data: { result } }) => {
              this.luckyInfo = result
            }
          )
        }
        // 分享
        if (typeof wx != 'undefined') {
          //分享产品不配置

          if (!this.$route.path.match('productDetail')) {
            this._shareConfig(res.data.result.jsk)
          }
        }

        // 如果能量已集满并且是活动区
        if (this.activityDetail.open_status != 0 && this.activity_type == 0) {
          this._joinListApi()
          this.windowScroll()
        }

        //显示商品分组
        if (
          this.activityDetail.add_type == 0 &&
          (this.activityDetail.open_status == 0 || this.activity_type == 1)
        ) {
          this.categories = res.data.result.categories
          this.tabs = res.data.result.categories.map(item => {
            return item.category_name
          })
          this._productApi()
          this.$nextTick(() => {
            this.windowScroll()
          })
        }
      })
    },
    //参与列表
    _joinListApi() {
      if (!this.activityDetail.key) {
        return
      }
      if (this.isRequest) {
        return
      }
      this.isRequest = true
      joinList({
        page: this.current_page + 1,
        key: this.activityDetail.key
      }).then(
        res => {
          if (res.data.result && res.data.result.length != 0) {
            this.attendList = [...this.attendList, ...res.data.result]
            this.current_page += 1
            this.last_page = this.current_page + 1
          } else {
            this.last_page = this.current_page
          }
          this.loading = false
          this.isRequest = false
        },
        res => {
          this.isRequest = false
        }
      )
    },
    //收藏商品
    collectProduct() {
      userFavorite({ id: this.$route.params.id }).then(res => {
        this.$notify('收藏成功！')
        this.$set(this.activityDetail, 'favorite', true)
      })
    },
    _shareConfig(jsk) {
      // jsk.debug=true
      wx.config(jsk)
      wx.ready(() => {
        wx.updateTimelineShareData({
          title: this.activityDetail.name, // 分享标题
          link:
            window.location.origin +
            window.location.pathname +
            '?pid=' +
            this.activityDetail.uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.activityDetail.image, // 分享图标
          success: function() {
            // 设置成功
          }
        })
        wx.updateAppMessageShareData({
          title: this.activityDetail.name, // 分享标题
          link:
            window.location.origin +
            window.location.pathname +
            '?pid=' +
            this.activityDetail.uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          desc: this.activityDetail.share_name || '兰溪官方特色购物平台。', // 分享描述
          imgUrl: this.activityDetail.image, // 分享图标
          success: function() {
            // 设置成功
          }
        })
      })
      wx.error(res => {
        console.log('detail error', res)
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      })
    },
    // 复制链接
    copyUrl() {
      var ua = navigator.userAgent.toLowerCase()
      var isWeixin = ua.indexOf('micromessenger') != -1
      if (isWeixin) {
        this.showMask = true
      } else {
        this.$copyText(
          window.location.origin +
            window.location.pathname +
            '?pid=' +
            this.activityDetail.uid
        ).then(
          e => {
            this.$toast('复制成功！')
          },
          e => {
            this.$notify(e)
          }
        )
      }
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
@import url('../../assets/style/mixin'); //引入公共css类
.pd-15 {
  padding: 15px;
}
.detail {
  height: 100%;
  .fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 99;
  }
  .section-wrapper {
    height: 100%;
  }
  .top-tab {
    position: fixed;
    top: 45px;
    height: 40px;
    width: 100%;
    background: #fff;
    border-top: 5px solid #f8f8f8;
    z-index: 99;
    .top-item {
      flex: 1;
      font-size: 18px;
      line-height: 40px;
      text-align: center;
      color: #666666;
      font-weight: 500;
    }
    .top-item-selected {
      color: #fc4353;
    }
    .top-bottom-line {
      position: absolute;
      bottom: 0;
      left: 0;
      transition: all 0.3s ease;
    }
    .content-line {
      width: 43px;
      height: 5px;
      background: rgba(252, 67, 83, 1);
      border-radius: 3px;
    }
  }
  .pink {
    color: #eb4e51;
    font-size: 13px;
  }
  .search-wrapper {
    width: 100%;
    height: 45px;
    z-index: 100;
    font-size: 15px;
    background: rgba(248, 248, 248, 1);
    .categories {
      flex-shrink: 0;
    }
    .back-arrow {
      width: 24px;
      height: 24px;
      background: url('../../assets/imgs/arrow-left.png');
      background-size: 100% 100%;
    }
    .f-8 {
      font-size: 8px;
    }
    .search {
      margin: 0 15px 0 15px;
      flex: 1;
      height: 27px;
      background: #ffffff;
      border-radius: 5px;

      .search-icon {
        height: 15px;
        width: 15px;
        .bg-image('../../assets/imgs/search-gray');
        background-size: 100% 100%;
      }
      .input {
        height: 100%;
        flex: 1;
        border-radius: 13px;
        background: #fff;
        outline: none;
        &::placeholder {
          font-size: 14px;
          line-height: 27px;
        }
      }
    }
  }
  .add-45 {
    padding-top: 45px;
  }
  .search-sticky {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    height: 45px;
    background: rgba(248, 248, 248, 1);
    z-index: 100;
  }
  .buy-send {
    z-index: 24;
    position: fixed;
    top: 102px;
    right: 0;
    height: 24px;
    width: 65px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #cc1717;
  }
  .rule-tag {
    z-index: 24;
    position: absolute;
    top: 152px;
    right: 0;
    height: 24px;
    width: 65px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #cc1717;
  }
  .body {
    position: relative;
    padding-top: 100px;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    .p-16 {
      padding: 15px;
    }
    .product-name {
      width: 301px;
      max-height: 40px;
      font-size: 15px;
      line-height: 20px;
      font-weight: bold;
    }
    .product-img {
      margin: 0 auto;
      display: block;
      width: 345px;
      height: 200px;
      border-radius: 5px;
    }
    .attend-msg {
      padding: 10px 6px;
      font-size: 12px;
      color: #f8597f;
      background: rgba(255, 241, 242, 1);
      border-radius: 5px;
    }
    .icons {
      transform: translateX(10%);
      img {
        height: 24px;
        width: 24px;
        border-radius: 50%;
        &:nth-child(2) {
          transform: translateX(-25%);
        }
        &:nth-child(3) {
          transform: translateX(-50%);
        }
        &:nth-child(4) {
          transform: translateX(-75%);
        }
        &:nth-child(5) {
          transform: translateX(-100%);
        }
        &:nth-child(6) {
          transform: translateX(-125%);
        }
        &:nth-child(7) {
          transform: translateX(-150%);
        }
        &:nth-child(8) {
          transform: translateX(-175%);
        }
      }
    }
    .arrow-right {
      width: 14px;
      height: 14px;
      .bg-image('../../assets/imgs/arrow-right');
      background-size: 100% 100%;
    }
    .collect-img {
      position: absolute;
      top: 20px;
      right: 26px;
      height: 21px;
      width: 21px;
      background: url('../../assets/imgs/collection.png');
      background-size: 100% 100%;
      // transition: all ease 0.3s;
    }
    .collect-img-selected {
      position: absolute;
      top: 20px;
      right: 26px;
      height: 21px;
      width: 21px;
      background: url('../../assets/imgs/collected.png');
      background-size: 100% 100%;
      // transition: all ease 0.3s;
    }
    .progress-wrapper {
      position: relative;
      width: 100%;
      height: 10px;
      background: #eee;
      border-radius: 3px;
      .progress-number {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        font-size: 10px;
        color: #fff;
      }
    }
    .progress {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      border-radius: 3px;
      .bg-1();
    }
    .power {
      display: inline-block;
      width: 17px;
      height: 17px;
      .bg-image('../../assets/imgs/power-red');
      background-size: 100% 100%;
    }
    .receive-count {
      display: inline-block;
      width: 15px;
      height: 15px;
      .bg-image('../../assets/imgs/receive-red');
      background-size: 100% 100%;
    }
    .action-attend {
      margin-bottom: 20px;
      height: 46px;
      background: #fff1f2;
      border-radius: 5px;
      .attend-number {
        color: #ea373f;
      }
      .icons {
        transform: translateX(10%);
        img {
          height: 24px;
          width: 24px;
          border-radius: 50%;
          &:nth-child(2) {
            transform: translateX(-25%);
          }
          &:nth-child(3) {
            transform: translateX(-50%);
          }
          &:nth-child(4) {
            transform: translateX(-75%);
          }
          &:nth-child(5) {
            transform: translateX(-100%);
          }
          &:nth-child(6) {
            transform: translateX(-125%);
          }
          &:nth-child(7) {
            transform: translateX(-150%);
          }
          &:nth-child(8) {
            transform: translateX(-175%);
          }
        }
      }
      .arrow-right {
        width: 14px;
        height: 14px;
        .bg-image('../../assets/imgs/arrow-right');
        background-size: 100% 100%;
      }
    }
    .color-red {
      color: #f3515a;
    }
    .line-height-19 {
      line-height: 19px;
    }
    .copy-url {
      width: 40px;
      height: 20px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(248, 89, 127, 1);
      border-radius: 10px;
    }
    .copy-tip {
      padding-bottom: 17px;
      font-size: 11px;
      text-align: center;
    }
    // menu
    .menu {
      height: 109px;
      .menu-item {
        width: 33%;
        .share {
          height: 53px;
          width: 53px;
          .bg-image('../../assets/imgs/share');
          background-size: 100% 100%;
          border-radius: 50%;
        }
        .rule {
          height: 53px;
          width: 53px;
          .bg-image('../../assets/imgs/rule');
          background-size: 100% 100%;
          border-radius: 50%;
        }
        .history {
          height: 53px;
          width: 53px;
          .bg-image('../../assets/imgs/history');
          background-size: 100% 100%;
          border-radius: 50%;
        }
      }
    }
    .relative {
      position: relative;
    }
    .product-item {
      position: relative;
      width: 100%;
      margin-bottom: 10px;
      .attend-body {
        flex-direction: column;
      }
      .label {
        padding: 2px;
        border: 1px solid rgba(191, 191, 191, 1);
        border-radius: 2px;
      }
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0.8;
      }
      img {
        flex-shrink: 0;
        width: 125px;
        height: 125px;
        border-radius: 5px;
      }
      .product-name1 {
        margin-bottom: 10px;
        font-size: 12px;
        height: 32px;
        line-height: 16px;
      }
      .send-code {
        margin-right: 6px;
        padding: 4px 4px;
        border-radius: 5px;
        font-size: 10px;
        border: 1px solid rgba(248, 89, 127, 1);
        line-height: 12px;
        color: rgba(248, 89, 127, 1);
      }
      .color-pink {
        padding: 4px 4px;
        color: #fff;
        font-size: 10px;
        background: #e83028;
        border-radius: 5px;
      }
      .price {
        // font-size: 10px;
      }
      .discount-price {
        font-size: 10px;
        text-decoration: line-through;
      }
      .buy {
        width: 77px;
        height: 28px;
        font-size: 13px;
        border-radius: 15px;
        .bg-1();
      }
      .power {
        display: inline-block;
        width: 8px;
        height: 14px;
        .bg-image('../../assets/imgs/power');
        background-size: 100% 100%;
      }
      .receive-count {
        display: inline-block;
        width: 8px;
        height: 14px;
        .bg-image('../../assets/imgs/receive');
        background-size: 100% 100%;
      }
      .flex-1 {
        flex: 1;
      }
    }
    .title-border {
      text-indent: 4px;
      border-left: 2px solid #cc0000;
      line-height: 20px;
      margin-bottom: 4px;
    }
    .divide-tip {
      margin-top: 26px;
      font-size: 12px;
      color: #999;
      .line {
        width: 91px;
        height: 1px;
        background: #cccccc;
      }
    }
    .share-logo {
      height: 84px;
      background: url('../../assets/imgs/share-logo.png');
      background-size: 100% 100%;
    }
    .tab-wrap {
      padding-bottom: 10px;
      overflow: hidden;
    }
    .wrapper {
      position: relative;
      min-height: 100%;
    }
    .forbid-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-height: 280px;
      // padding-bottom: 75px;
      background: rgba(0, 0, 0, 0.2);
      z-index: 28;
    }
    .arrow-down {
      position: absolute;
      top: 280px;
      left: 50%;
      width: 12px;
      height: 5px;
      transform: translateX(-50%);
      background: url('../../assets/imgs/down-arrow.png');
      background-size: 100% 100%;
      animation: show 1s infinite;
      @keyframes show {
        0% {
          top: 280px;
        }
        100% {
          top: 290px;
        }
      }
    }
    .arrow-down1 {
      position: absolute;
      top: 290px;
      left: 50%;
      width: 12px;
      height: 5px;

      transform: translateX(-50%);
      background: url('../../assets/imgs/down-arrow.png');
      background-size: 100% 100%;
      animation: show1 1s infinite;
      @keyframes show1 {
        0% {
          top: 290px;
        }
        100% {
          top: 300px;
        }
      }
    }
    .forbid {
      position: relative;
      height: 266px;
      width: 303px;
      background: url('../../assets/imgs/forbid.png');
      background-size: 100% 100%;
      z-index: 28;
      .forbid-tip {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 182px;
        height: 28px;
        background: rgba(232, 51, 47, 1);
        border-radius: 14px;
      }
    }
    .pd-16 {
      padding: 0 16px 16px;
    }
    .recommand-tip {
      margin-bottom: 15px;
      font-size: 16px;
      text-align: center;
      font-weight: 600;
    }
    .recommand-item {
      margin-bottom: 25px;
      .recommand-img {
        height: 200px;
        width: 100%;
        border-radius: 8px;
      }
      .recommand-tilte {
        margin-top: 11px;
        font-size: 15px;
      }
    }
    .height-full {
      margin: 0 15px;
    }
    .pt-44 {
      padding-top: 54px;
    }
    .sticky {
      position: fixed;
      top: 135px;
      height: 44px;
      width: 100%;
      background: #fff;
      z-index: 100;
    }
    .tip {
      margin: 0 15px;
      height: 56px;
      line-height: 56px;
      font-size: 16px;
      font-weight: bold;
    }
    .reward-product {
      img {
        height: 130px;
        width: 130px;
        border-radius: 4px;
      }
      .product-info {
        flex: 1;
        margin-left: 19px;
        padding-top: 11px;
        .name {
          height: 18px;
          width: 160px;
          line-height: 18px;
        }
        .flex-wrap {
          flex-wrap: wrap;
        }
        .label {
          padding: 3px 11px;
          border: 1px solid rgba(245, 64, 41, 1);
          border-radius: 3px;
          color: #f54029;
          font-size: 12px;
        }
        .aligin-end {
          align-items: flex-end;
        }
        .price-color {
          color: #f54029;
        }
        .share-btn {
          width: 76px;
          height: 28px;
          border-radius: 14px;
          font-size: 13px;
          .bg-1();
        }
      }
    }
    .srcoll-wrapper {
      padding: 18px 17px 0px 17px;
      height: calc(100% - 44px);
      box-sizing: border-box;
      z-index: 0;
      overflow: hidden;
      .flex-wrap {
        flex-wrap: wrap;
      }
      .flex-1 {
        flex: 1;
      }
    }
    .loading-bottom {
      width: 100%;
      text-align: center;
    }
    .share-rule {
      width: 70px;
      height: 20px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(248, 89, 127, 1);
      border-radius: 5px;
      color: #f8597f;
      font-size: 9px;
    }
  }
  .back-home {
    position: fixed;
    bottom: 200px;
    left: 0;
    height: 30px;
    width: 60px;
    background: #f3515a;
    color: #fff;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    font-size: 16px;
    line-height: 26px;
  }
  .info {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
  }
  .btn {
    color: #fff;
    margin: 10px auto;
    width: 70px;
    height: 25px;
    border-radius: 5px;
    border: 1px dashed #fff;
  }
  .weixin-tip-content {
    font-size: 16px;
    letter-spacing: 5px;
    font-weight: bold;
    line-height: 20px;
  }
  .weixin-tip {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    width: 265px;
    padding: 55px 0 0;
    margin: 0 auto;
    text-align: center;
    background: url()
      no-repeat right top;
    background-size: 45px 68px;
  }

  .weixin-tip-img {
    padding: 110px 0 0;
  }

  .weixin-tip-img::after {
    display: block;
    margin: 15px auto;
    content: ' ';
    background-size: cover;
  }
  .lucky-text {
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: center;
    line-height: 30px;
    color: #35b8f6;
    font-size: 13px;
  }
  .money {
    margin-left: 168px;
    width: 49px;
    height: 45px;
    background: url('../../assets/imgs/money.png');
    background-size: 100% 100%;
  }
  .tip-content {
    margin-top: 7px;
    margin-left: 108px;
    font-size: 12px;
    color: rgba(120, 120, 120, 1);
    line-height: 18px;
    .color-blue {
      color: #35b8f6;
    }
  }
  .rule-action {
    margin-top: 37px;
    margin-bottom: 23px;
    margin-left: 43px;
    padding: 7px 5px;
    width: 291px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    background: linear-gradient(
      55deg,
      rgba(252, 54, 45, 1),
      rgba(254, 109, 106, 1)
    );
    border-radius: 15px;
    .line {
      margin: 6px 0;
      width: 160px;
      height: 1px;
      background: #fff;
    }
    .line1 {
      margin: 6px 0;
      width: 70px;
      height: 1px;
      background: #fff;
    }
    .rest {
      margin-left: 6px;
      text-align: left;
    }
  }
  .lucky-num {
    margin-left: 130px;
    margin-top: 16px;
    align-items: flex-end;
    .content-title {
      font-size: 30px;
      color: rgba(253, 119, 81, 1);
    }
    .lucky-tip {
      margin-left: 7px;
      font-size: 13px;
      line-height: 16px;
      font-weight: 600;
      color: rgba(253, 119, 81, 1);
    }
  }
  .money-large {
    margin-top: 14px;
    margin-left: 124px;
    width: 126px;
    height: 119px;
    background: url('../../assets/imgs/money.png');
    background-size: 100% 100%;
  }
  .reward-info {
    margin: 15px 0 14px 87px;
    width: 192px;
    font-size: 12px;
    text-align: start;
    line-height: 18px;
  }
  .result {
    border-top: 1px dashed #fc2802;
    padding: 19px 0;
    text-align: center;
  }
  .rule-margin {
    margin: 12px 0 0 43px;
  }

  .rule-cal {
    padding: 10px 0;
    height: 58px;
    text-align: center;
    .line {
      margin: 6px 0;
      width: 160px;
      height: 1px;
      background: #000;
    }
    .rest {
      margin-left: 6px;
      text-align: left;
      font-size: 12px;
    }
  }
  .share-reward {
    padding: 11px 20px;
    font-size: 12px;
    color: rgba(248, 89, 127, 1);
    background: rgba(255, 241, 242, 1);
    border-radius: 5px;
  }
  .rule-tip-title {
    position: absolute;
    bottom: 12px;
    width: 198px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    .divide-line {
      width: 29px;
      height: 1px;
      background: #fff;
    }
  }
  .bg-gray {
    background: #f8f8f8;
  }
  .attend-title {
    height: 22px;
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-indent: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #f8f8f8;
    background: #fff;
  }
  .add-btn {
    margin-left: 4px;
    display: inline-block;
    padding: 5px 11px;
    border-radius: 5px;
    font-size: 12px;
    border: 1px solid rgba(248, 89, 127, 1);
    line-height: 12px;
    color: rgba(248, 89, 127, 1);
  }
}
</style>